<template>
	<view>
		<!-- height: calc(100vh - 88rpx); -->
		<view class="flex-col" style="height: 100vh">
			<view class="head-box">
				<view class="search-box">
					<view class="align-center">
						<view class="head-inp align-center posRelative"
							:style="{width:(isSearch || iscancel ? '600':'700'  )+ 'rpx'}">
							<image class="inp-img" src="../../static/images/fans/search.png" mode=""></image>
							<input confirm-type="search" @confirm="search" v-model="keyword" id="input"
								class="inp-val gray3" type="text" :placeholder="$t('team').搜索粉丝昵称手机号"
								@focus.stop="getfocus" @blur.stop="loseblur" @input.stop="winput">
							<view @click.stop="clearkey()" v-if="keyword!=''&& (isSearch || iscancel )"
								class="posAbsort rt0 top0 flex-col align-center justify-center plr10"
								style="height: 60rpx;">
								<image class="inp-img" src="../../static/images/mine/icon/delete.png" mode="">
								</image>
							</view>

						</view>
						<view class="ml10 red" v-if="isSearch && keyword!=''" @click="search()">
							<text>{{$t('common').搜索}}</text>
						</view>
						<view class="ml10" v-if="iscancel && keyword==''"><text>{{$t('common').取消}}</text></view>
					</view>
				</view>

				<view class="sx-box align-center">
					<view class="sx-list align-center justify-center" v-for="(m,n) in sxArr" :key="n"
						@click="sxShow(n)">
						<view v-if="m.seltab && !popup" class="sx-text" :style="m.seltab?'color:#F44A42;':''">
							{{$t('fan')[m.text]}}
						</view>
						<view v-else class="sx-text" :style="selindex==n && popup?'color:black;':''">
							{{$t('fan')[m.text]}}
						</view>
						<image v-if="m.seltab && !popup" class="sx-img"
							:src="m.seltab?'../../static/images/fans/sxy.png':''" mode="widthFix"></image>
						<image v-else class="sx-img"
							:src="selindex==n && popup?'../../static/images/fans/heixia.png':'../../static/images/fans/sxn.png'"
							mode="widthFix"></image>
					</view>

					<!-- 筛选弹窗 -->
					<view class="sxpop-box" @click="close()" v-if="selindex==0 && popup"
						:style="'height:'+(swiperHeight)+'px'">
						<view class="sxpop-con" @click.stop="">
							<!-- 筛选 -->
							<view>
								<view class="sx-con">
									<view>
										<view class="sx-tit gray9">{{$t('team').段位等级}}</view>
										<view class="grade-con align-center flex-wrap">
											<view class="grade-list" v-for="(m,n) in gradeArr" :key="n"
												:class="m.selgrade?'grade-ac':''" @click="gradeBtn(n)">
												{{$t('team')[m.text]}}
											</view>
										</view>
									</view>
									<view>
										<view class="sx-tit gray9" style="padding-top: 0;">{{$t('team').本月考核销售额范围}}
										</view>
										<view class="align-center sx-xse">
											<input v-model="leftmin" class="sx-inp gray3" type="number"
												:placeholder="$t('common').最低" />
											<view class="sx-bor"></view>
											<input v-model="leftmax" class="sx-inp gray3" type="number"
												:placeholder="$t('common').最高" />
											<view class="sx-text gray9">{{$t('team').左边粉丝}}</view>
										</view>
										<view class="align-center sx-xse">
											<input v-model="rightmin" class="sx-inp gray3" type="number"
												:placeholder="$t('common').最低" />
											<view class="sx-bor"></view>
											<input v-model="rightmax" class="sx-inp gray3" type="number"
												:placeholder="$t('common').最高" />
											<view class="sx-text gray9">{{$t('team').右边粉丝}}</view>
										</view>
									</view>
								</view>
							</view>
							<view class="align-center" style="border-top: 2rpx solid #EEEEEE;">
								<view class="sxpop-cz sxpop-bot" @click="sxHide(0)">{{$t('common').重置}}</view>
								<view class="sxpop-qd sxpop-bot" @click="sxHide(1)">{{$t('mine').查看}}</view>
							</view>
						</view>
					</view>
					<view class="sxpop-box" @click="close()" v-if="selindex==1 && popup"
						:style="'height:'+(swiperHeight)+'px'">
						<view class="sxpop-con" @click.stop="">
							<!-- 排序 -->
							<view class="px-con" :style="'max-height:'+(swiperHeight)+'px'">
								<view class="px-list align-center justify-between" v-for="(m,n) in pxArr" :key="n">
									<view class="px-text">{{$t('mine')[m.text]}}</view>
									<view class="align-center">
										<view class="align-center px-img justify-center"
											:class="m.selpx=='asc'&&pxactive==n?'red fstj-h-t-ac':''"
											@click="pxBtn(n,'asc')">
											<view class="mr5 ft12"><text>{{$t('common').升序}}</text>
											</view>
											<image
												:src="m.selpx=='asc'&&pxactive==n?'../../static/images/fans/fshongsheng.png':'../../static/images/fans/fshuisheng.png'"
												style="width: 12rpx;height: 24rpx;" mode="aspectFill"></image>
										</view>
										<view class="align-center px-img justify-center"
											:class="m.selpx=='desc'&&pxactive==n?'red fstj-h-t-ac':''"
											@click="pxBtn(n,'desc')">
											<view class="mr5 ft12"><text>{{$t('common').降序}}</text>
											</view>
											<image
												:src="m.selpx=='desc'&&pxactive==n?'../../static/images/fans/fshongxia.png':'../../static/images/fans/fshuijiang.png'"
												style="width: 12rpx;height: 24rpx;" mode="aspectFill"></image>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 列表 -->
			<view class="flex1 flex-col overhide plr12" style="min-height: 0;">
				<!-- 				<scroll-view v-if="teamList.length>0" scroll-y="true" class="scroll-box"
					:style="'height:'+(swiperHeight)+'px'" @scrolltolower="upLoad"> -->
				<mescroll-uni top='' :fixed="false" @init="mescrollInit" @down="downCallback" @up="upCallback"
					:up="upOption" :down="downOption" bottom="0" :bottombar="false">
					<view class="list-box mt10 " v-for="(m,n) in teamList" :key="n"
						@click="navTo(`/pages/mine/teame-detail?uid=${m.gid}`)">
						<view class="list-head align-center justify-between">
							<view class="align-center">
								<image class="list-tx" :src="m.p_avater" mode="aspectFill"></image>
								<view class="list-name gray3 clamp" style="max-width: 342rpx;">{{m.p_name}}</view>
								<image style="width: 116rpx;"
									:src="`../../static/images/icon/`+(m.p_grade || 0)+`g.png`" mode="widthFix">
								</image>
							</view>
							<image style="width: 10rpx;" src="../../static/images/fans/right.png" mode="widthFix">
							</image>
						</view>
						<view class="list-con">
							<view class="list-title gray3">{{$t('index').本月考核}}</view>
							<view class="align-center justify-between">
								<view class="list-item radius4" style="background-color:#FEFAFA;">
									<view class="list-i-num">{{parseFloat(m.left_f || 0).toLocaleString()}}</view>
									<view class="align-center justify-start mt12">
										<image class="list-i-img" :src="m.left_avater" mode="aspectFill"></image>
										<view class="list-i-name gray6 clamp" style="max-width: 210rpx;">
											{{m.left_name}}</view>
									</view>
								</view>
								<view class="list-item radius4" style="background-color:#FEFAFA;">
									<view class="list-i-num">{{parseFloat(m.right_f || 0).toLocaleString()}}</view>
									<view class="align-center justify-start mt12">
										<image class="list-i-img" :src="m.right_avater" mode="aspectFill"></image>
										<view class="list-i-name gray6 clamp" style="max-width: 210rpx;">
											{{m.right_name}}</view>
									</view>
								</view>
							</view>

						</view>
					</view>

				</mescroll-uni>
				<!-- </scroll-view> -->
			</view>
			<!-- 			<view class="ts-box" v-else>
				<image class="ts-img" src="../../static/images/mine/icon_wushuju@2x.png" mode=""></image>
				<view class="ts-text">{{$t('common').暂无数据}}</view>
			</view> -->
		</view>
	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin], // 使用mixin
		data() {
			return {
				downOption: {
					auto: true
				},
				upOption: {
					auto: false,
					page: {
						num: 0,
						size: 20,
					},
					textNoMore: this.$t('common').已经到底了,
					empty: {
						tip: this.$t('common').暂无数据 // 空提示
					}
				},
				wHeight: 0, //屏幕高度
				swiperHeight: 0, //滚动区域高度
				keyword: '', //搜索关键字
				isSearch: false, //是否搜索
				iscancel: false, //是否取消
				// 筛选tab
				sxArr: [{
						id: 1,
						text: "筛选"
					},
					{
						id: 2,
						text: "排序"
					}
				],
				sxId: "",

				// 等级
				gradeArr: [{
						id: 1,
						text: "青铜"
					},
					{
						id: 2,
						text: "白银"
					},
					{
						id: 3,
						text: "黄金"
					},
					{
						id: 4,
						text: "钻石"
					},
					{
						id: 5,
						text: "星耀"
					},
					{
						id: 6,
						text: "至尊"
					},
					{
						id: 7,
						text: "王者"
					}
				],
				gradeId: 1,

				// 排序
				pxArr: [{
						id: 1,
						text: "团队本月销售额新增",
						name: 'new_f_value'
					},
					{
						id: 2,
						text: "团队本月销售额已结算",
						name: 'total_sell'
					},
					{
						id: 3,
						text: "PLUS团队累计销售额",
						name: 'new_f_valued'
					}
				],
				pxId: 1,
				teamList: [], //团队数据
				pxactive: -1, //排序列表下标
				selindex: -1, //筛选tab选中的下标
				popup: false, //是否打开弹窗
				leftmin: '', //左边粉丝
				leftmax: '',
				rightmin: '', //右边粉丝
				rightmax: '',
				selgrade: [], //选中的星级数组
				new_f_value: '',
				total_sell: '',
				new_f_valued: '',
			}
		},

		onLoad() {
			this.$store.dispatch('getuserInfo')
			let newsObj = uni.getSystemInfoSync();
			this.wHeight = newsObj.windowHeight;
			// this.UserTeamListAPI()
			uni.setNavigationBarTitle({
				title: this.$t('mine').团队数据
			})

		},

		mounted() { //获取head-box高度。计算可滚动区域高度
			const query = uni.createSelectorQuery().in(this);
			query.select('.head-box').boundingClientRect(data => {
				this.swiperHeight = this.wHeight - data.height;
			}).exec();
		},
		computed: {
			userInfo() {
				return this.$store.state.userInfo
			},
		},
		methods: {
			// 筛选框关闭
			close() {
				this.popup = false
				this.selindex = -1
			},
			// 搜索框聚焦时
			getfocus() {
				console.log(this.keyword)
				if (this.keyword != '') {
					console.log(this.keyword != '')
					this.isSearch = true
				} else {
					this.iscancel = true
				}

			},
			// 失去焦点
			loseblur() {
				setTimeout(() => {
					this.isSearch = false
					this.iscancel = false
				}, 100)
			},
			// 键盘输入时
			winput(e) {
				this.keyword = e.detail.value
				if (this.keyword) {
					this.isSearch = true
					this.iscancel = false
				} else {
					this.isSearch = false
					this.iscancel = true
					// this.UserTeamListAPI()
					this.mescroll && this.mescroll.resetUpScroll()
				}

			},
			clearkey() {
				this.isfocus = true
				this.iscancel = true
				this.keyword = ''
				// this.UserTeamListAPI()
				this.mescroll && this.mescroll.resetUpScroll()
			},
			// 搜索商品
			async search() {
				if (!this.keyword) {
					return this.$utils.msg(this.$t('team').请输入搜索的粉丝昵称手机号备注)
				}
				// this.UserTeamListAPI()
				this.mescroll && this.mescroll.resetUpScroll()
			},
			// 筛选弹窗打开
			sxShow(val) {
				console.log(this.selindex)
				if (this.selindex == val && !this.sxArr[this.selindex].seltab) {
					this.popup = false
					this.selindex = -1
				} else if (this.selindex == val && this.sxArr[this.selindex].seltab) {
					this.popup = !this.popup
				} else {
					this.selindex = val
					this.popup = true
				}
			},

			// 等级选择
			gradeBtn(val) {
				let selgrade = this.gradeArr[val].selgrade
				this.$set(this.gradeArr[val], 'selgrade', !selgrade)
			},

			// 排序选择
			pxBtn(n, order) {
				this.pxactive = n
				console.log(this.selindex)
				this.$set(this.sxArr[this.selindex], 'seltab', true)
				this.pxArr.forEach((item, index) => {
					if (n == index) {
						this.$set(this.pxArr[n], 'selpx', order)
					} else {
						this.$set(this.pxArr[index], 'selpx', '')
					}
				})
				this.popup = false
				// this.UserTeamListAPI()
				this.mescroll && this.mescroll.resetUpScroll()
			},
			// 重置和查询
			sxHide(val) {
				// 重置
				if (val == 0) {
					this.$set(this.sxArr[this.selindex], 'seltab', false)
					this.gradeArr.forEach((item, index) => {
						this.$set(this.gradeArr[index], 'selgrade', false)
					})
					this.leftmin = '' //左边粉丝
					this.leftmax = ''
					this.rightmin = '' //右边粉丝
					this.rightmax = ''
					this.popup = false
					this.selindex = -1
					this.selgrade = []
					// this.UserTeamListAPI()
					this.mescroll && this.mescroll.resetUpScroll()
				} else {
					// 查询
					let selgradeArr = this.gradeArr.filter((item, index) => {
						return item.selgrade
					})
					if (selgradeArr.length > 0) {
						this.$set(this.sxArr[this.selindex], 'seltab', true)
					} else {
						this.$set(this.sxArr[this.selindex], 'seltab', false)
					}
					this.selgrade = []
					this.gradeArr.forEach((item, index) => {
						if (item.selgrade) {
							this.selgrade.push(item.id)
						}
					})
					if (this.leftmin && this.leftmax || this.rightmin && this.rightmax) {
						this.$set(this.sxArr[this.selindex], 'seltab', true)
					}

					if (this.leftmin <= this.leftmax && this.rightmin <= this.rightmax) {
						// this.UserTeamListAPI()
						this.mescroll && this.mescroll.resetUpScroll()
					} else {
						if (this.leftmin > this.leftmax) {
							return this.$utils.msg(this.$t('team').请输入左边粉丝正确的最小值最大值)
						}
						if (this.rightmin > this.rightmax) {
							return this.$utils.msg(this.$t('team').请输入右边粉丝正确的最小值最大值)
						}
					}
					this.popup = false
					// this.UserTeamListAPI()
				}
			},

			// 滚动到底部
			upLoad() {
				console.log('555');
			},
			// async UserTeamListAPI() {
			// 	let pxobj = {}
			// 	this.pxArr.forEach((item, index) => {
			// 		pxobj[item.name] = item.selpx || ''
			// 	})
			// 	let left = ''
			// 	let right = ''
			// 	if (this.leftmin != '' && this.leftmax != '') {
			// 		left = [this.leftmin, this.leftmax].join()
			// 	} else {
			// 		left = ''
			// 	}
			// 	if (this.rightmin != '' && this.rightmax != '') {
			// 		right = [this.rightmin, this.rightmax].join()
			// 	} else {
			// 		right = ''
			// 	}
			// 	console.log(right, left)
			// 	let obj = {
			// 		grade: this.selgrade.join(),
			// 		right_range: right || '',
			// 		left_range: left || '',
			// 		keyword: this.keyword
			// 	}
			// 	let allObj = {
			// 		...pxobj,
			// 		...obj
			// 	}
			// 	const res = await this.$api.UserTeamList(allObj)
			// 	this.teamList = res.data
			// },
			upCallback(page) {
				let pxobj = {}
				this.pxArr.forEach((item, index) => {
					pxobj[item.name] = item.selpx || ''
				})
				let left = ''
				let right = ''
				if (this.leftmin != '' && this.leftmax != '') {
					left = [this.leftmin, this.leftmax].join()
				} else {
					left = ''
				}
				if (this.rightmin != '' && this.rightmax != '') {
					right = [this.rightmin, this.rightmax].join()
				} else {
					right = ''
				}
				console.log(right, left)
				let obj = {
					grade: this.selgrade.join(),
					right_range: right || '',
					left_range: left || '',
					keyword: this.keyword
				}
				if (page.num == 1) this.teamList = []; //如果是第一页需手动制空列表
				this.$api.UserTeamListV2({
					...pxobj,
					...obj,
					page: page.num,
					limit: page.size
				}).then(res => {
					let curPageData = res.data.list; //当前页的数据列表
					let curPageLen = curPageData?.length; //当前页的数据长度
					let totalPage = parseInt(res.data.count / 20) + 1; //总页数
					let hasNext = page.num === totalPage ? false : true //根据页数判断是否有下一页
					this.teamList = this.teamList.concat(curPageData); //追加新数据
					this.mescroll.endSuccess(curPageLen, hasNext);
				})
			},
		}
	}
</script>

<style lang="scss">
	page {
		background: #F5F5F5;
	}

	// 头部
	.head-box {
		background: #FFFFFF;

		// 搜索
		.search-box {
			padding: 14rpx 24rpx;
			box-sizing: border-box;

			.head-inp {
				// width: 100%;
				height: 60rpx;
				box-sizing: border-box;
				padding: 0 20rpx;
				background: #F5F5F5;
				border-radius: 100rpx;

				.inp-img {
					width: 32rpx;
					height: 32rpx;
					margin-right: 16rpx;
				}

				.inp-val {
					width: 500rpx;
					height: 60rpx;
					font-size: 28rpx;
				}
			}

			.search-con {
				background: #F5F5F5;
				border-radius: 100rpx;
				padding: 0 20rpx;
				box-sizing: border-box;

				.search-icon {
					width: 32rpx;
					height: 32rpx;
				}

				.search-inp {
					width: 600rpx;
					height: 60rpx;
					margin-left: 16rpx;
					color: #333;
					font-size: 28rpx;
				}
			}
		}

		// 筛选
		.sx-box {
			position: relative;
			border-top: 2rpx solid #eee;

			.sx-list {
				width: 50%;
				height: 90rpx;

				.sx-text {
					color: #999999;
					font-size: 28rpx;
				}

				.sx-img {
					width: 20rpx;
					margin-left: 8rpx;
				}
			}
		}
	}

	// 列表

	.list-box {
		padding: 32rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		margin-bottom: 24rpx;

		.list-head {
			padding-bottom: 24rpx;
			border-bottom: 2rpx solid #EEEEEE;

			.list-tx {
				width: 80rpx;
				height: 80rpx;
				border-radius: 100rpx;
				margin-right: 20rpx;
			}

			.list-name {
				font-size: 30rpx;
				font-weight: bold;
				margin-right: 20rpx;
			}
		}

		.list-con {
			.list-title {
				padding: 24rpx 0;
				font-size: 30rpx;
				font-weight: bold;
			}

			.list-item {
				width: 312rpx;
				height: 152rpx;
				box-sizing: border-box;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;

				.list-i-img {
					width: 40rpx;
					height: 40rpx;
					border-radius: 100rpx;
					margin-right: 16rpx;
				}

				.list-i-name {
					font-size: 24rpx;
					font-weight: bold;
				}

				.list-i-num {
					font-size: 40rpx;
					font-weight: bold;
				}
			}
		}
	}


	// 筛选弹窗
	.sxpop-box {
		width: 100%;
		position: absolute;
		top: 90rpx;
		left: 0;
		z-index: 1000;
		background: rgba(0, 0, 0, 0.5);

		.sxpop-con {
			background: #FFFFFF;
			overflow-y: scroll;

			// 筛选
			.sx-con {
				padding: 32rpx 24rpx;

				.sx-tit {
					padding: 16rpx 0;
					font-size: 28rpx;
				}

				.sx-xse {
					margin-bottom: 24rpx;

					.sx-inp {
						width: 220rpx;
						height: 61rpx;
						background: rgba(127, 127, 127, 0.05);
						font-size: 26rpx;
						text-align: center;
						border-radius: 8rpx;
					}

					.sx-bor {
						width: 26rpx;
						height: 4rpx;
						border-radius: 100rpx;
						background: #999999;
						margin: 0 20rpx;
					}

					.sx-text {
						font-size: 28rpx;
						margin-left: 20rpx;
					}
				}

				.grade-con {
					padding: 32rpx 0;

					.grade-list {
						width: 160rpx;
						height: 61rpx;
						text-align: center;
						line-height: 61rpx;
						background: rgba(127, 127, 127, 0.06);
						border: 2rpx solid rgba(127, 127, 127, 0.06);
						font-size: 26rpx;
						color: #666666;
						border-radius: 8rpx;
						margin: 0 20rpx 32rpx 0;
						box-sizing: border-box;
					}

					.grade-ac {
						color: #EE6753;
						background: #FFD9D7 !important;
						border: 2rpx solid #EE6753 !important;
					}
				}
			}

			// 排序
			.px-con {
				padding: 0 24rpx;
				overflow-y: scroll;

				.px-list {
					height: 100rpx;
					border-bottom: 2rpx solid #EEEEEE;

					.px-text {
						font-size: 30rpx;
					}

					.px-img {
						width: 100rpx;
						height: 46rpx;
						margin-right: 24rpx;
						border-radius: 4px;
						background: #F8F8F8;
					}

					.fstj-h-t-ac {
						background: #FFD9D7;
						border: 2rpx solid #EE6753;
						color: #EE6753;
					}
				}
			}

			// 底部按钮
			.sxpop-bot {
				width: 50%;
				height: 90rpx;
				text-align: center;
				line-height: 90rpx;
				font-size: 28rpx;
			}

			.sxpop-cz {
				color: #999999;
			}

			.sxpop-qd {
				background: #F44A42;
				color: #FFFFFF;
			}
		}
	}

	.grade-list:nth-child(4n) {
		margin-right: 0 !important;
	}

	.ts-box {
		padding: 228rpx 0;
		text-align: center;

		.ts-img {
			width: 520rpx;
			height: 380rpx;
		}

		.ts-text {
			color: #0D0A0B;
			font-size: 30rpx;
			font-weight: 400;
			margin-top: 32rpx;
		}
	}
</style>